var tipoNodo;
var numeroNodos;
var ids = [];

function setTipoNodo(tipo){
    tipoNodo = tipo;
}
function setNumeroNodos(numero){
    numeroNodos = numero;
}
function getTipoNodo(){
    return tipoNodo;
}
function getNumeroNodos(){
    return numeroNodos;
}

$(document).ready(function() {
    tipoNodo = 2;    
    numeroNodos = 1;                    
    jsPlumb.importDefaults({
        Endpoint : ["Dot", {
            radius:5
        }],
        HoverPaintStyle : {
            strokeStyle:"#42a62c", 
            lineWidth:2
        },
        ConnectionOverlays : [
        [ "Arrow", { 
            location:1,
            id:"arrow",
            length:14,
            foldback:0.8
        } ],
        [ "Label", {
            label:"FOO", 
            id:"label"
        }]
        ]
    });
                
    
    jsPlumb.bind("jsPlumbConnection", function(conn) {
        conn.connection.setPaintStyle({
            strokeStyle:'#000000'
        });
        conn.connection.getOverlay("label").setLabel("Conected");
    });
    jsPlumb.bind("beforeDrop", function(conn) {
        alert(conn.sourceId +", "+conn.targetId );
        jsPlumb.connect({
            source:conn.sourceId , 
            target:conn.targetId
        });
    });
    jsPlumb.bind("click", function(c) { 
        jsPlumb.detach(c); 
    });
                
    makeInicio(50, 50);
    //Setting up new nodes
    $('#container').dblclick(function(e) {
        var position = getCursorPosition('#container', e);
        if(tipoNodo == 2){
            makeAsignacion(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 3){
            makeMientras(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 4){
            makeSi(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 5){
            makeSiNo(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 6){
            makePara(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 7){
            makeLectura(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 8){
            makeEscritura(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 9){
            makeFuncion(position[1]-50, position[0]-50);
        }
        if(tipoNodo == 10){
            makeBreak(position[1]-50, position[0]-50);
        }
        
    }); 
});

function getCursorPosition(canvas, event) {
    var x, y;

    canoffset = $(canvas).offset();
    x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft - Math.floor(canoffset.left);
    y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop - Math.floor(canoffset.top) + 1;

    return [x,y];
}

HTMLCanvasElement.prototype.relMouseCoords = function (event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft;
        totalOffsetY += currentElement.offsetTop;
    }
    while (currentElement = currentElement.offsetParent)

    canvasX = event.pageX - totalOffsetX;
    canvasY = event.pageY - totalOffsetY;

    // Fix for variable canvas width
    canvasX = Math.round( canvasX * (this.width / this.offsetWidth) );
    canvasY = Math.round( canvasY * (this.height / this.offsetHeight) );

    return {
        x:canvasX, 
        y:canvasY
    }
}

//Bloques
function makeInicio(x, y){
    var inicio = $('<div>').attr('id', 'inicio' + numeroNodos).addClass('inicio').text('Inicio - ' + numeroNodos);
    var fin = $('<div>').attr('id', 'fin' + numeroNodos).addClass('fin').text('Fin - ' + numeroNodos);
    var inicios = $('<div>').attr('id','inicios'+ numeroNodos).addClass('whites');
    ids[ids.length] = 'inicio' + numeroNodos;
    ids[ids.length] = 'fin' + numeroNodos;
    inicio.append(inicios);
    inicio.css({
        'top': x,
        'left': y
    });
    fin.css({
        'top': x+100,
        'left': y+100
    })
    $('#container').append(inicio);
    $('#container').append(fin); 
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#inicio" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(inicio);
    jsPlumb.draggable(fin);
    jsPlumb.makeSource(inicios , Endpoint);
    jsPlumb.makeTarget(fin, {
        anchor:"Continuous"		
    });
    jsPlumb.connect({
        source:inicio , 
        target:fin
    });
    numeroNodos++; 
}
function makeBreak(x, y){
    var Break = $('<div>').attr('id', 'break' + numeroNodos).addClass('break').text('Break - ' + numeroNodos);
    var breaks = $('<div>').attr('id','breaks'+ numeroNodos).addClass('whites');
    ids[ids.length] = 'break' + numeroNodos;
    Break.append(breaks);
    Break.css({
        'top': x,
        'left': y
    });
    $('#container').append(Break);
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#break" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(Break);
    jsPlumb.makeSource(breaks , Endpoint);
    jsPlumb.makeTarget(Break, {
        anchor:"Continuous"		
    });
    numeroNodos++; 
}
function makeAsignacion(x, y){
    var asignacion = $('<div>').attr('id', 'asignacion' + numeroNodos).addClass('asignacion').text('Asignacion - ' + numeroNodos);
    var asignacions = $('<div>').attr('id','asignacions'+ numeroNodos).addClass('browns');
    ids[ids.length] = 'asignacion' + numeroNodos;
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    asignacion.append(input);
    asignacion.append(asignacions);
    asignacion.css({
        'top': x,
        'left': y
    });
    $('#container').append(asignacion);
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#asignacion" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(asignacion);
    jsPlumb.makeSource(asignacions , Endpoint);
    jsPlumb.makeTarget(asignacion, {
        anchor:"Continuous"		
    });
    numeroNodos++;
}
function makeMientras(x, y){
    var mientras = $('<div>').attr('id', 'mientras' + numeroNodos).addClass('mientras').text('Mientras - ' + numeroNodos);
    var fin = $('<div>').attr('id', 'fin' + numeroNodos).addClass('fin').text('Fin - ' + numeroNodos);
    var mientrass = $('<div>').attr('id','inicios'+ numeroNodos).addClass('darkred');
    
    ids[ids.length] = 'mientras' + numeroNodos;
    ids[ids.length] = 'fin' + numeroNodos;
    
    
    
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    mientras.append(input);
    mientras.append(mientrass);
    mientras.css({
        'top': x,
        'left': y
    });
    fin.css({
        'top': x+100,
        'left': y+100
    })
    $('#container').append(mientras);
    $('#container').append(fin); 
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#mientras" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    var EndpointFin = {
        parent:$("#fin" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:2,
        reattach:true
    };
    var fins = $('<div>').attr('id','fins'+ numeroNodos).addClass('whites');
    fin.append(fins);
    jsPlumb.makeSource(fins , EndpointFin);
    jsPlumb.draggable(mientras);
    jsPlumb.draggable(fin);
    jsPlumb.makeSource(mientrass , Endpoint);
    jsPlumb.makeTarget(fin, {
        anchor:"Continuous"		
    });
    jsPlumb.makeTarget(mientras, {
        anchor:"Continuous"		
    });
    jsPlumb.connect({
        source:fin , 
        target:mientras,
        reattach:true
    });
    numeroNodos++; 
}
function makePara(x, y){
    var para = $('<div>').attr('id', 'para' + numeroNodos).addClass('para').text('Para - ' + numeroNodos);
    var fin = $('<div>').attr('id', 'fin' + numeroNodos).addClass('fin').text('Fin - ' + numeroNodos);
    var paras = $('<div>').attr('id','paras'+ numeroNodos).addClass('whites');
    ids[ids.length] = 'para' + numeroNodos;
    ids[ids.length] = 'fin' + numeroNodos;
    
   
    
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    para.append(input);
    para.append(paras);
    para.css({
        'top': x,
        'left': y
    });
    fin.css({
        'top': x+100,
        'left': y+100
    })
    $('#container').append(para);
    $('#container').append(fin); 
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#para" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    var EndpointFin = {
        parent:$("#fin" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:2,
        reattach:true
    };
    var fins = $('<div>').attr('id','fins'+ numeroNodos).addClass('whites');
    fin.append(fins);
    jsPlumb.makeSource(fins , EndpointFin);
    jsPlumb.draggable(para);
    jsPlumb.draggable(fin);
    jsPlumb.makeSource(paras , Endpoint);
    jsPlumb.makeTarget(fin, {
        anchor:"Continuous"		
    });
    jsPlumb.makeTarget(para, {
        anchor:"Continuous"		
    });
    jsPlumb.connect({
        source:fin , 
        target:para,
        reattach:true
    });
    numeroNodos++; 
}
function makeLectura(x, y){
    var lectura = $('<div>').attr('id', 'lectura' + numeroNodos).addClass('lectura').text('Lectura - ' + numeroNodos);
    var lecturas = $('<div>').attr('id','lecturas'+ numeroNodos).addClass('whites');
    ids[ids.length] = 'lectura' + numeroNodos;
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    lectura.append(input);
    lectura.append(lecturas);
    lectura.css({
        'top': x,
        'left': y
    });
    $('#container').append(lectura);
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#lectura" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(lectura);
    jsPlumb.makeSource(lecturas , Endpoint);
    jsPlumb.makeTarget(lectura, {
        anchor:"Continuous"		
    });
    numeroNodos++;
}
function makeEscritura(x, y){
    var escritura = $('<div>').attr('id', 'escritura' + numeroNodos).addClass('escritura').text('Escritura - ' + numeroNodos);
    var escrituras = $('<div>').attr('id','escrituras'+ numeroNodos).addClass('whites');
    ids[ids.length] = 'escritura' + numeroNodos;
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    escritura.append(input);
    escritura.append(escrituras);
    escritura.css({
        'top': x,
        'left': y
    });
    $('#container').append(escritura);
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#escritura" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(escritura);
    jsPlumb.makeSource(escrituras , Endpoint);
    jsPlumb.makeTarget(escritura, {
        anchor:"Continuous"		
    });
    numeroNodos++;
}
function makeFuncion(x, y){
    var funcion = $('<div>').attr('id', 'funcion' + numeroNodos).addClass('funcion').text('Funcion - ' + numeroNodos);
    var funcions = $('<div>').attr('id','funcions'+ numeroNodos).addClass('darkred');
    ids[ids.length] = 'funcion' + numeroNodos;
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    funcion.append(input);
    funcion.append(funcions);
    funcion.css({
        'top': x,
        'left': y
    });
    $('#container').append(funcion);
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#funcion" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    jsPlumb.draggable(funcion);
    jsPlumb.makeSource(funcions , Endpoint);
    jsPlumb.makeTarget(funcion, {
        anchor:"Continuous"		
    });
    numeroNodos++;
}
function makeSi(x, y){
    var si = $('<div>').attr('id', 'si' + numeroNodos).addClass('si').text('SI - ' + numeroNodos);
    var fin = $('<div>').attr('id', 'fin' + numeroNodos).addClass('fin').text('FIN - ' + numeroNodos);
    var siop = $('<div>').attr('id','sis'+ numeroNodos).addClass('greens');
    ids[ids.length] = 'si' + numeroNodos;
    ids[ids.length] = 'fin' + numeroNodos;
    
    
    
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    si.append(input);
    si.append(siop);
    si.css({
        'top': x,
        'left': y
    });
    fin.css({
        'top': x+100,
        'left': y+100
    })
    $('#container').append(si);
    $('#container').append(fin); 
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#si" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    var EndpointFin = {
        parent:$("#fin" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:2,
        reattach:true
    };
    var fins = $('<div>').attr('id','fins'+ numeroNodos).addClass('whites');
    fin.append(fins);
    jsPlumb.makeSource(fins , EndpointFin);
    jsPlumb.draggable(si);
    jsPlumb.draggable(fin);
    jsPlumb.makeSource(siop , Endpoint);
    jsPlumb.makeTarget(si, {
        anchor:"Continuous"		
    });
    jsPlumb.makeTarget(fin, {
        anchor:"Continuous"		
    });
    jsPlumb.connect({
        source:si , 
        target:fin,
        reattach:true
    });
    numeroNodos++; 
}
function makeSiNo(x, y){
    var si = $('<div>').attr('id', 'si' + numeroNodos).addClass('si').text('SI - ' + numeroNodos);
    var sino = $('<div>').attr('id', 'sino' + numeroNodos).addClass('si').text('Sino - ' + numeroNodos);
    var fin = $('<div>').attr('id', 'fin' + numeroNodos).addClass('fin').text('FIN - ' + numeroNodos);
    var sis = $('<div>').attr('id','sis'+ numeroNodos).addClass('greens');
    var sinos = $('<div>').attr('id','sinos'+ numeroNodos).addClass('reds');
    ids[ids.length] = 'si' + numeroNodos;
    ids[ids.length] = 'sino' + numeroNodos;
    ids[ids.length] = 'fin' + numeroNodos;
    
    
    
    
    var input = $('<input>').attr('id', 'text' + numeroNodos).attr('type', 'text').attr('class', 'texto');
    si.append(input);
    si.append(sis);
    sino.append(sinos);
    si.css({
        'top': x,
        'left': y
    });
    sino.css({
        'top': x,
        'left': y+150
    });
    fin.css({
        'top': x+100,
        'left': y+150
    })
    $('#container').append(si);
    $('#container').append(sino);
    $('#container').append(fin); 
    var targetColor = "#316b31";
    var Endpoint = {
        parent:$("#si" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:2,
        reattach:true
    };
    var Endpoint2 = {
        parent:$("#sino" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:1,
        reattach:true
    };
    var EndpointFin = {
        parent:$("#fin" + numeroNodos),
        anchor:"Continuous",
        connectorStyle:{
            strokeStyle:targetColor, 
            lineWidth:2
        },
        connector: ["StateMachine", {
            curviness:20
        } ],
        maxConnections:2,
        reattach:true
    };
    var fins = $('<div>').attr('id','fins'+ numeroNodos).addClass('whites');
    fin.append(fins);
    jsPlumb.makeSource(fins , EndpointFin);
    jsPlumb.draggable(si);
    jsPlumb.draggable(fin);
    jsPlumb.draggable(sino);
    jsPlumb.makeSource(sis , Endpoint);
    jsPlumb.makeSource(sinos , Endpoint2);
    jsPlumb.makeTarget(si, {
        anchor:"Continuous"		
    });
    jsPlumb.makeTarget(sino, {
        anchor:"Continuous"		
    });
    jsPlumb.makeTarget(fin, {
        anchor:"Continuous"		
    });
    jsPlumb.connect({
        source:si , 
        target:sino,
        reattach:true
    });
    jsPlumb.connect({
        source:si , 
        target:fin,
        reattach:true
    });
    jsPlumb.connect({
        source:sino , 
        target:fin,
        reattach:true
    });
    numeroNodos++; 
}

function getNodesInformation(){
    var idsText="";
    for(indice = 0; indice < ids.length; indice++){
        var idText = "";
        $('#'+ids[indice]).each(function(){
            idText+=$(this).attr("id")+"$";
            idText+=$(this).text()+"$";
            idText+=$(this).css("top")+"$";
            idText+=$(this).css("left")+"$";
            if($(this).children(".texto").val()!=undefined){
                idText+=$(this).children(".texto").val();
            }
        });
        idsText+= idText+"\n";
    }
    return idsText;
}

function getConnectionInformation(){
    var connection = jsPlumb.getAllConnections();
    var connections = "";
    for( var prop in connection ) {
        var conns = connection[prop]
        for(var j = 0; j < conns.length; j++){
            connections += conns[j].sourceId+"$"+conns[j].targetId+"\n";
        }
    }
    return connections;
}

